﻿$(document).ready(function () {

    $('div.chapter a[href*="wikipedia"]').attr({
        rel: 'external',
        title: function () {
            return 'Learn more about ' + $(this).text() + 'at wikipeida';
        },
        id: function (index, oldValue) {
            return 'wikilink_' + index;
        }
    });

    //$('<a href="#top">back to top</a>').insertAfter($('div.chapter p'));
    $('<a id="top"></a>').prependTo($('body'));

    //insertBefore：在现有元素外部、之前添加内容
    //insertAfter：在现有元素外部、之后添加内容
    //prependTo：在现有元素内部、之前添加内容
    //appendTo：在现有元素内部、之后添加内容

    //$('span.footnote').insertBefore($('#footer')).wrapAll('<ol id="note"></ol>').wrap('<li></li>');
    var $notes = $('<ol id="note"></ol>').insertBefore($('#footer'));
    $('span.footnote').each(function (index) {
        /*$('<sup>' + (index + 1) + '</sup>').insertBefore(this);
        $(this).appendTo($notes).wrap('<li></li>');*/
        //作用同下

        //$(this).before('<sup>' + (index + 1) + '</sup>').appendTo($notes).wrap('<li></li>');

        //$(this).before(['<a href="#footnote-', index + 1, '" id="context-', index + 1, '" class="context">','<sup>', index + 1, '</sup></a>'].join('')).appendTo($notes).wrap('<li id="footnote-' + index + 1 + '"></li>');

        $(this).before(['<a href="#footnote-', index + 1, '" id="context-', index + 1, '" class="context">', '<sup>', index + 1, '</sup></a>'].join('')).appendTo($notes).append(['<a href="#context-', index + 1, '">(context)</a>'].join('')).wrap('<li id="footnote-' + (index + 1) + '"></li>');

    });

    $('span.pull-quote').each(function (index) {
        var $parent = $(this).parent('p');
        $parent.css({ position: 'relative' });
        var $clone = $(this).clone();
        $clone.addClass('pulled').find('span.drop').html('&hellip;').end().text($clone.text()).prependTo($parent);
    });

    // 课后题
    //1.修改添加back to top链接的代码，以便这些链接只从第四段后面才开始出现。
    $('div.chapter p').each(function (index) {
        if (index > 2) {
            $('<a href="#top">back to top</a>').insertAfter($(this));
        }
    });
    //2.在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样。确保链接仍然有效。
    $('a[href="#top"]').click(function () {
        $(this).after($('<p>You were here</p>'));
    });
    //3.在单击作者名字时，把文本改为粗体（通过添加一个标签，而不是操作类或CSS属性）。
    /*$('#f-author').click(function () {
        $(this).wrap('<b></b>');
    });*/
    //4.挑战：在随后单击粗体作者名字时，删除之前添加的<b>元素（也就是在粗体文本与正常文本之间切换）。    
    $('#f-author').click(function () {
        if ($(this).parent('b').length > 0) {
            var $parent = $(this).parent('b');
            var $clone = $(this);
            $clone.insertBefore($parent);
            $parent.remove();
        } else {
            $(this).wrap('<b></b>');
        }
    });
    //5.挑战：为正文中的每个段落添加一个inhabitants类，但不能调用.addClass()方法。确保不影响现有的类。

    $('div.chapter p').each(function() {
        var className = $(this).attr('class');
        if (className) {
            $(this).attr('class', ['inhabitants', className].join(' '));
        } else {
            $(this).attr('class', 'inhabitants');
        }
    });
});